<template>
    <view class="content">
        <view class="nav">
            <view class="nav-i" :class="{active : type == 0}" @click="chooseNav(0)">领券中心</view>
            <view class="nav-i" :class="{active : type == 1}" @click="chooseNav(1)">待使用</view>
            <view class="nav-i" :class="{active : type == 2}" @click="chooseNav(2)">已使用</view>
            <view class="nav-i" :class="{active : type == 3}" @click="chooseNav(3)">已过期</view>
        </view>
        
        <view class="wrapper">
            <view class="pop-item" v-for="(item, index) in list" :key="index">
                <image src="../../static/image/cbg1.png" class="cou-bg" v-if="type == 0 || type == 1"></image>
                <image src="../../static/image/cbg2.png" class="cou-bg" v-if="type == 2 || type == 3"></image>
                <view class="item-cou">
                    <view class="item-cou-l" :class="{cActive : type == 2 || type == 3}">
                        <view>
                            <text class="cou-num">{{item.money}}</text>
                            <text>元</text>
                        </view>
                        <view>{{item.name}}</view>
                    </view>
                    <view class="item-cou-r">
                        <view class="c-title" :class="{cActive : type == 2 || type == 3}">{{item.coupon}}</view>
                        <view class="cou-time" v-if="type == 0">有效期: {{item.valid_day}}天</view>
						<view class="cou-time" v-else>有效期: {{item.start_time}}至{{item.end_time}}</view>
						<view class="see" @click.stop="seeLine(item)">查看使用线路</view>
                    </view>
                </view>
                <view class="l-btn" v-if="type == 0" @click="doReceive(item)">立即领取</view>
            </view>
			
			<view style="height: 94rpx;padding-top: 30rpx;">
			    <u-loadmore :status="status" v-if="status != 'loadmore'" />
			</view>
            <!-- <view class="pop-cou-none" >
                <image src="../../static/icon/price_04.png" class="price-04"></image>
                <view>暂无可用优惠券</view>
            </view> -->
        </view>
		
		<u-popup v-model="show" :round="true" mode="bottom" :closeable="true" width="750rpx" height="1000rpx" border-radius="14">
		    <view class="pop-box-cou">
		        <view class="pop-title">使用线路</view>
		        <view>
		            <!-- <scroll-view :scroll-y="true" style="height: 200rpx;"> -->
		                <view class="pop-box-item">
		                    <view v-for="(el, ind) in item.line" :key="ind">
								{{el}}、
							</view>
		                </view>
		            <!-- </scroll-view> -->
					<view class="u-p-t-40 u-tips-color" v-if="rule">
						<view class="u-p-b-10 text-bold">优惠券使用规则：</view>
						<u-parse :html="rule"></u-parse>
					</view>
		        </view>
		    </view>
		</u-popup>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                type: 0,
				status: 'loadmore', //是否显示没有更多了
				page: 1,
				list: [],
				show: false,
				item: {},
				rule: '',
            };
        },
        onLoad() {
            this.getList()
			this.getRules()
        },
        onReachBottom() {
        	if(this.page == 1){return}
        	this.getList()
        },
        methods: {
			seeLine(item) {
				this.item = item
				this.show = true
			},
			
			// 立即领取
			doReceive(item) {
				this.$ajax('receive_coupon', {
					user_token: this.$getSync('userToken'),
					id: item.id,
				}).then(ret => {
					if (ret.success == 1000) {
						this.$toast('领取成功')
						setTimeout(() => {
							this.list = []
							this.page = 1
							this.status = 'loadmore'
							this.getList()
						}, 500)
					} else {
						this.$toast(ret.msg);
					}
				});
			},
			
            chooseNav(num) {
				if (this.type == num) return
                this.type = num
				this.list = []
				this.page = 1
				this.status = 'loadmore'
				this.getList()
            },
			
			getList() {
				if (this.status == 'nomore') return;
				this.status = 'loading';
				this.$ajax('user_coupon', {
					user_token: this.$getSync('userToken'),
					page: this.page,
					limit: 10,
			        status: this.type,//0未领取 1待使用 2已使用 3已过期
			        money: '',//满足使用条件金额
					line_id: '',//满足使用条件线路id
				}).then(ret => {
					if (ret.success == 1000) {
						if (ret.detail && ret.detail.coupon && ret.detail.coupon.length > 0) {
							this.list = this.list.concat(ret.detail.coupon);
							this.page++;
							this.status = 'loadmore'
						} else {
							this.status = 'nomore'
						}
					} else {
						this.$toast(ret.msg);
					}
				});
			},
			
			// 使用规则
			getRules() {
				this.$ajax('select_rules', {
					type: 4,
				}).then(ret => {
					this.rule = ret.detail.rules
				});
			},
        }
    };
</script>

<style lang="scss">
	.pop-box-cou{
	    padding: 0 30rpx;
	}
	.pop-title{
	    font-size: 34rpx;
	    font-weight: bold;
	    text-align: center;
	    padding: 30rpx;
	}
	.pop-box-item{
	    display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		align-items: center;
	}
	.pop-box-item>view{
		padding-right: 15rpx;
	}
	
    page{
        background-color: #fff;
    }
    .nav{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 30rpx 0;
        border-bottom: 2rpx solid #ebebeb;
    }
    .nav-i{
        width: calc(100vw / 4);
        font-size: 30rpx;
        text-align: center;
    }
    .active{
        color: #004580;
        font-weight: bold;
        position: relative;
    }
    .active::after{
        display: block;
        content: '';
        width: 32rpx;
        height: 8rpx;
        background-color: #004580;
        position: absolute;
        bottom: -30rpx;
        left: 50%;
        transform: translateX(-50%);
    }
    
    .wrapper{
        padding: 28rpx;
    }
    .pop-item{
        position: relative;
        margin-bottom: 20rpx;
    }
    .cou-bg{
        width: 694rpx;
        height: 176rpx;
    }
    .item-cou{
        width: 670rpx;
        height: 165rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: absolute;
        left: 10rpx;
        top: 0;
    }
    .item-cou-l{
		width: 180rpx;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color: #ff602c;
    }
	.see{
		color: #ff602c;
		padding-top: 10rpx;
	}
    .cActive{
        color: #575453;
    }
    .cou-num{
        font-size: 44rpx;
        font-weight: bold;
    }
    .item-cou-r{
        padding-left: 30rpx;
        padding-right: 15rpx;
        flex: 1;
    }
    .c-title {
        font-size: 30rpx;
        font-weight: bold;
        padding-bottom: 5rpx;
    }
    .cou-time{
        font-size: 24rpx;
        color: #8b8b8b;
    }
    .pop-cou-none{
        font-size: 30rpx;
        color: #9b9b9b;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding-top: 100rpx;
    }
    .price-04{
        width: 92rpx;
        height: 79rpx;
        margin-bottom: 20rpx;
    }
    .l-btn{
        width: 125rpx;
        height: 42rpx;
        background-color: #ff602c;
        border-radius: 20rpx 0 10rpx 0;
        font-size: 24rpx;
        color: #fff;
        text-align: center;
        line-height: 42rpx;
        position: absolute;
        right: 2rpx;
        bottom: 2rpx;
        z-index: 9;
    }
    

</style>
